<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>示例演示</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 注意：项目正式环境请勿引用该地址 -->
    <script src="/static/js/jquery.min.js?v=2.1.4"></script>
    <script src="/static/js/base.js"></script>
    <link rel="stylesheet" href="/static/layui/css/layui.276.css" media="all">
    <script src="/static/layui/layui.2.7.6.js"></script>
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
    <legend>修改权限后需要重新登录菜单才有变化</legend>
</fieldset>
<div id="nodes" class="demo-tree demo-tree-box" style="width: 80%; padding: 40px"></div>
<div class="layui-form-item" style="position: fixed;bottom: 20px;right: 20px;">
    <div class="layui-input-block">
<!--        <button class="layui-btn layui-btn-warm" lay-active="setChecked" >全选</button>-->
        <button class="layui-btn layui-btn-danger" lay-active="reload" >还原</button>
        <button class="layui-btn" lay-active="getChecked" >立即提交</button>
    </div>
</div>
<script>
    layui.use(['tree', 'util','layer'], function(){
        var tree = layui.tree
            ,layer = layui.layer
            ,util = layui.util

        //按钮事件
        util.event('lay-active', {
            getChecked: function(othis){
                var checkedData = tree.getChecked('layTree'); //获取选中节点的数据

                // layer.alert(JSON.stringify(checkedData), {shade:0});
                // return false;
                //递归获取id
                var pushData = getIds(checkedData)
                // console.log('--',checkedData,pushData);
                $.ajax({
                    url:'/admin/user/setPower',
                    async:false,
                    data:{id:getQueryVariable('id'),nodes:JSON.stringify(pushData)},
                    type:'post',
                    dataType:'json',
                    headers:{
                        'token':localStorage.getItem('hypercmfname')+'_'+localStorage.getItem('token'),
                        'accept':'*/*'
                    },
                    success:function(res){
                        if(res.code==1){
                            layer.msg('修改成功',{time:1200},function () {
                                parent.layui.layer.closeAll()
                                parent.layui.table.reload('dataTable')
                            })
                        }else{
                            layer.alert(res.msg,{icon:5})//1√，2×，3问号，4锁，5不开心，6开心
                        }
                    },error:function(res){
                        layer.alert('请求失败',{icon:2})
                    }
                })
            }
            ,setChecked: function(){
                let topNode = localStorage.getItem("topNode")
                tree.setChecked('layTree', topNode.split(',').sort()); //勾选指定节点
            }
            ,reload: function(){
                //重载实例
                tree.reload('layTree', {});

            }
        });
        $.ajax({
            url:'/admin/user/power',
            async:false,
            data:{id:getQueryVariable('id')},
            type:'get',
            dataType:'json',
            headers:{
                'token':localStorage.getItem('hypercmfname')+'_'+localStorage.getItem('token'),
                'accept':'*/*'
            },
            success:function(res){
                if(res.code==1){
                    var topNode = []

                    for(let j in res.data){
                        //将顶级节点置为false，避免顶级节点选中后，子节点全部选中
                        topNode.push(res.data[j].id)
                        res.data[j].checked = false
                    }

                    localStorage.setItem('topNode',topNode)
                    //开启节点操作图标
                    tree.render({
                        elem: '#nodes'
                        ,showCheckbox: true
                        ,data: res.data
                        ,id:'layTree'
                        //,edit: ['add', 'update', 'del'] //操作节点的图标
                        ,click: function(obj){
                            layer.msg(JSON.stringify(obj.data));
                        }
                    });
                }else{
                    layer.alert(res.msg,{icon:5},function () {
                        parent.layui.layer.closeAll()
                    })//1√，2×，3问号，4锁，5不开心，6开心
                }
            },error:function(res){
                layer.alert('请求失败',{icon:2})
            }
        })
    });
    function getIds(data, arr=[]){
        for(let i of data){
           arr.push(i)
            if(i.children!=undefined && i.children.length>0){
                getIds(i.children,arr)
            }
        }
        // console.log('s',arr)

        // return arr.sort(function (a,b) {
        //     return a-b;
        // });
        return arr;
    }
</script>

</body>
</html>